<template>
    <!-- 登录 -->
    <div class="login">
        <div class="login-title">
            <h3>登录</h3>
        </div>
        <div class="login-form">
            <div class="form-item">
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="form-item">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码">
            </div>
            <div class="form-item">
                <button @click="login">登录</button>
          

                <!-- 错误信息 -->
                 <p v-if="errorMsg" class="error-msg">{{ errorMsg }}</p>
            </div>
        </div>
            </div>
            
</template>

<script>
    export default {
        data() {
            return {
                username: '',
                password: '',
                errorMsg: ''
            }
        },
        methods: {
            login() {
              
                    this.$router.push('/');
                    this.errorMsg = '登陆成功';
               
            }
        }
        }
</script>

<style lang="scss" scoped>
    .form-item {
        margin-bottom: 20px;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input {
        width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    button {
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        
    }
    .error-msg {
        color: red;
        margin-top: 5px;
    }
</style>

